<template>
  <div :class="{'black-bg':isBlack}">
    <equityList v-if="autoTabs && data.length === 1 && data[0].cat_list" :data="data[0].cat_list" class="mb20" :isBlack="isBlack"/>
    <el-tabs v-model="activeName" class="theme2" v-else>
      <el-tab-pane v-for="(it,i) in data" :key="i" :label="it.name" :name="i+''"/>
      <div class="page-wrap">
        <div class="page-scroll" :style="{transform:' translateX(-'+(activeName*100)+'%)'}">
          <div class="page-item" v-for="(it,i) in data" :key="i">
            <slot :data="it"></slot>
            <equityList :data="it.cat_list" :isBlack="isBlack"/>
          </div>
        </div>
      </div>
    </el-tabs>
  </div>
</template>

<script>
import equityList from './equity-list'
export default {
  name: 'EquityTabs',
  components: {
    equityList
  },
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    },
    autoTabs: {
      type: Boolean,
      default: true
    },
    isBlack: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      activeName: '0'
    }
  },
  watch: {
    data () {
      this.activeName = '0'
    }
  },
  computed: {
  },
  destroyed () {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.el-tabs.theme2{
  /deep/{
    .el-tabs__content{
      padding-top: 20px;
      padding-bottom: 20px;
    }
  }
}
.page{
  &-wrap{
    overflow: hidden;
  }
  &-scroll{
    display: flex;
  }
  &-item{
    display: flex;
    flex-direction: column;
    flex: 0 0 100%;
    .equity-class-list{
      flex: 1;
    }
  }
}
.black-bg{
  .theme2{
   /deep/.el-tabs__nav-wrap::after{
      background: rgba($color: #fff, $alpha: 0.1)
    }
    /deep/.el-tabs__item{
      color: rgba($color: #fff, $alpha: 0.7);
    }
  }
}
</style>
